<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		body{
			background: #2ECC71;
		}
		a{
			text-decoration: none;
		}
		li{
			list-style: none;
		}
		#slide{
			overflow: hidden;
			position: relative;
		}
		#slide ul{
			overflow: hidden;
		}
		#slide ul li{
			float: left;
		}
		#slide ul li a,#slide ul li img{
			width: 100%;
		}
	</style>
</head>
<body>
	<div id="slide">
		<ul id="ul">
			<li><a href=""><img src="./img/1.jpg" alt=""></a></li>
			<li><a href=""><img src="./img/2.jpg" alt=""></a></li>
			<li><a href=""><img src="./img/3.jpg" alt=""></a></li>
			<li><a href=""><img src="./img/4.jpg" alt=""></a></li>
<!-- 			<li><a href=""><img src="./img/5.jpg" alt=""></a></li> -->
		<!-- 	<li><a href=""><img src="./img/6.jpg" alt=""></a></li>
			<li><a href=""><img src="./img/7.jpg" alt=""></a></li>
			<li><a href=""><img src="./img/8.jpg" alt=""></a></li> -->
		</ul>
	</div>

	<script type="text/javascript">
		var slide=function(){
			var hdThis=this;
			// 最外层大容器slide
			hdThis.hdSlideEle=document.getElementById('slide');
			// ul 容器
			hdThis.hdUlEle = hdThis.hdSlideEle.getElementsByTagName('ul')[0];
			//li，图片的容器
			hdThis.hdLiEle = hdThis.hdUlEle.getElementsByTagName('li');
			// li 标签的初始长度
			hdThis.hdLiNum=hdThis.hdLiEle.length;
			// 屏幕的宽度
			hdThis.hdScreenWidth=window.screen.width;
			// 移动的索引值
			hdThis.hdIndex=0;
			//平移的值
			hdThis.hdTransLen=0;
			// 开始的X坐标
			hdThis.hdStartX=0;
			// 开始的平移的位置
			hdThis.hdStarLen=0;
			// 定时器
			hdThis.hdTimer;

			hdThis.hdRun=function(){
				document.addEventListener('touchmove',function(e){
					e.preventDefault();
				},false)
				// 设置每张图片容器的长度为屏幕的宽度
				for(var i=0;i<hdThis.hdLiEle.length;i++){
					hdThis.hdLiEle[i].style.width=hdThis.hdScreenWidth +'px';
				}
				// 2.准备无缝的html，把外层容器里面的所有的图片容器复制一份(4张变8张)，并且设置外层容器的宽度
				hdThis.hdUlEle.innerHTML+=hdThis.hdUlEle.innerHTML;
				hdThis.hdUlEle.style.width=hdThis.hdScreenWidth * 2 * hdThis.hdLiNum + 'px';
				// 3.监听touchstart,touchmove,touchend事件
				hdThis.hdUlEle.addEventListener('touchstart',hdThis.hdStart,false);
				hdThis.hdUlEle.addEventListener('touchmove',hdThis.hdMove,false);
				hdThis.hdUlEle.addEventListener('touchend',hdThis.hdEnd,false);
				// 页面加载完以后开始定时器自动轮播
				window.onload=function(){
					hdThis.hdStartTimer();
				}
			}


			// touchend:算出结束 x坐标减去开始x坐标得到差距算出是否翻页，向左或向右并让其滑动一次，并且开始定时器自动轮播
			hdThis.hdEnd=function(e){
				var diff=e.changedTouches[0].pageX - hdThis.hdStartX;
				var absDiff=Math.abs(diff);
				// 如果移动的距离大于屏幕的一半
				if(absDiff > hdThis.hdScreenWidth / 2){
					//右移
					if(diff>0){
						hdThis.hdIndex--;
					}else{ //左移
						hdThis.hdIndex++;
					}
				}
				hdThis.hdSlide();
				hdThis.hdStartTimer();
			}




			// touchmove:算出移动x坐标减去开始x坐标得到差值，用手指按下的偏移量加差值，动画随手指移动
			hdThis.hdMove=function(e){
				e.preventDefault();
				var diff=e.changedTouches[0].pageX - hdThis.hdStartX;
				hdThis.hdTransLen=hdThis.hdStarLen + diff;
				// 动画
				hdThis.hdUlEle.style.transition='all 600ms';
				// 平移
				hdThis.hdUlEle.style.transform='translateX(' + hdThis.hdTransLen +'px)';
			}



			
			// touchstart:记录手指按下的开始x坐标和大容器偏移量，触摸第一张图片需要放到第二组的第一张图片
			hdThis.hdStart=function(e){
				clearInterval(hdThis.hdTimer);
				if(hdThis.hdIndex==0){
					hdThis.hdIndex=hdThis.hdLiNum;
					hdThis.hdTransLen=-hdThis.hdIndex*hdThis.hdScreenWidth;
					//去掉动画
					hdThis.hdUlEle.style.transition='';
					// 平移
					hdThis.hdUlEle.style.transform='translateX(' + hdThis.hdTransLen +'px)';
				}
				// 开始的x坐标
				hdThis.hdStartX=e.changedTouches[0].pageX;
				// 开始的平移的位置
				hdThis.hdStarLen=hdThis.hdTransLen;
			}


			hdThis.hdStartTimer=function(){
				hdThis.hdTimer=setInterval(function(){
					hdThis.hdIndex++;
					hdThis.hdSlide();
				},2000)
			}

			// 滑动
			hdThis.hdSlide=function(){
				hdThis.hdUlEle.style.transition='all 300ms';
				// 算出平移的距离
				hdThis.hdTransLen=-hdThis.hdIndex*hdThis.hdScreenWidth;
				// 平移
				hdThis.hdUlEle.style.transform='translateX(' +hdThis.hdTransLen +'px)';
				if(hdThis.hdIndex >= hdThis.hdLiNum){
					setTimeout(function(){
						hdThis.hdIndex=hdThis.hdIndex%hdThis.hdLiNum;
						// 算出平移的距离
						hdThis.hdTransLen=-hdThis.hdIndex*hdThis.hdScreenWidth;
						//去掉动画
						hdThis.hdUlEle.style.transition='';
						// 平移
						hdThis.hdUlEle.style.transform='translateX('+hdThis.hdTransLen+'px)';
					},500)
				}
			}

			
		}

		var obj=new slide;
		obj.hdRun();
	</script>
</body>
</html>